<template>
  <div class="message">
    <!-- 头 -->
    <div id="bar">
      <van-nav-bar title="消息"  :fixed="true" :placeholder="true">
        <template #right>
          <p>创建群聊</p>
        </template>
      </van-nav-bar>
    </div>
    <!-- icon 图标 -->
    <div class="icon">
      <div class="like">
        <div>
          <van-icon name="like" color="#FC5E5B" size="35px"></van-icon>
        </div>
        <p>赞和收藏</p>
      </div>
      <div class="concern">
        <div>
          <van-icon name="friends" color="#3379E4" size="35px"></van-icon>
        </div>
        <p>新增关注</p>
      </div>
      <div class="comment">
        <div>
          <van-icon name="chat" color="#35DA96" size="35px"></van-icon>
        </div>
        <p>评论和@</p>
      </div>
    </div>
    <!-- 列表 -->
    <div class="list">
      <ul>
        <li v-for="item in users.list" :key="item.id">
          <div class="item">
            <div class="head">
              <van-image :src="item.head" round></van-image>
            </div>
            <div class="card">
              <div class="card_top">
                <div class="name">{{item.name}}</div>
                <div class="time">{{item.time}}</div>
              </div>
              <div class="msg">你今天学习了嘛</div>
            </div>
          </div>
        </li>
        <li v-for="item in users.list" :key="item.id">
          <div class="item">
            <div class="head">
              <van-image :src="item.head" round></van-image>
            </div>
            <div class="card">
              <div class="card_top">
                <div class="name">{{item.name}}</div>
                <div class="time">{{item.time}}</div>
              </div>
              <div class="msg">你今天学习了嘛</div>
            </div>
          </div>
        </li>
        <li v-for="item in users.list" :key="item.id">
          <div class="item">
            <div class="head">
              <van-image :src="item.head" round></van-image>
            </div>
            <div class="card">
              <div class="card_top">
                <div class="name">{{item.name}}</div>
                <div class="time">{{item.time}}</div>
              </div>
              <div class="msg">你今天学习了嘛</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {NavBar,Image} from "vant"
export default {
  name:"Message",
  components: {
    [NavBar.name] : NavBar,
    [Image.name] : Image,
  },
  props : {
    users : {
      type : Object,
      default() {
        return {
          list:[
            {
              id:1,
              head : "avatar.jpg",
              name : "小武",
              time : "06-13"
            },
            {
              id:2,
              head : "avatar.jpg",
              name : "小明",
              time : "06-10"
            },
            {
              id:3,
              head : "avatar.jpg",
              name : "小杨",
              time : "06-11"
            },
          ]
        }
      }
    }
  },

}
</script>

<style lang="scss" scoped>
.message {
  width: 100vw;
  #bar {
    width: 100%;
    font-weight: bold;
  }
  // icon 图
  .icon {
    width: 100%;
    padding: 5%;
    display: flex;
    justify-content: space-around;
    >div>div {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 30%;
    }
    // scss 循环
    @each $icon, $color in (like:#FFE7E6,concern:#E0ECFE,comment:#E6FBF2){
      .#{$icon} {
        div {
          background: #{$color};
        }
        p {
          margin-top: 5px;
        }
      }
    }
  }
  .list {
    width: 100%;
    padding: 4%;
    // 预留底部导航位置
    margin-bottom: 25px;
    ul {
      width: 100%;
      // display: flex;
      li {
        width: 100%;
        padding: 2% 0;
        .item {
          width: 100%;
          display: flex;
          .head {
            width: 45px;
          }
          .card {
            color: #888;
            padding:  0 0 5% 3%;
            flex: 1;
            .card_top {
              padding-bottom: 5px;
              display: flex;
              justify-content: space-between;
              .name {
                color: #000;
                font-weight: 530;
                font-size: 15px;
              }
            }
          }
        }
      }
    }
  }
}
</style>